
<template>
  <div class="container">
    <div class="order-tit">
      <div class="order-user-msg">
        <div class="order-user-img"></div>
        <span class="user-name">王女士</span>
        <span class="phone-icon"></span>
      </div>
      <div style="padding-right: 30rpx">订单进行中···</div>
    </div>
    <div class="order-info">
      <div class="order-car-type">
        <div class="list-type">车型</div>
        <div class="list-msg">面包车</div>
      </div>
      <div class="order-car-type">
        <div class="list-type">用车时间</div>
        <div class="list-msg">2018-07-21 15:30</div>
      </div>
      <div class="order-car-type">
        <div class="list-type">备注</div>
        <div class="list-msg">无</div>
      </div>
      <div class="order-car-type">
        <div class="list-type">始发地</div>
        <div class="list-msg">海洋大厦<p class="dress-info">西安市未央区凤城二路17号</p></div>
      </div>
      <div class="order-car-type">
        <div class="list-type">目的地</div>
        <div class="list-msg">海洋大厦<p class="dress-info">西安市未央区凤城二路17号</p></div>
      </div>
    </div>
    <div class="order-ing"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '订单详情'
    })
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#192231',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  }
}
</script>

<style>
  .container{
    align-items: normal;
  }
.order-tit{
  width: 690rpx;
  margin: 0 auto;
  border-bottom: 2rpx solid #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 37rpx 0 56rpx 0;
}
.order-user-msg{
  display: flex;
  align-items: center;
  width: 324rpx;
  justify-content: space-between;
}
  .order-user-img{
    width: 123rpx;
    height: 123rpx;
    background-color: dimgray;
    border-radius: 50%;
  }
  .phone-icon{
    width: 44rpx;
    height: 44rpx;
    background: url("~static/img/phone.png") no-repeat center/cover;
    display: inline-block;
  }
  .order-info{
    padding-top: 50rpx;
  }
.order-car-type{
  display: flex;
  font-size: 28rpx;
  padding-left: 30rpx;
}
.list-type{
  text-align: justify;
  width: 135rpx;
  color: #c2c2c2;
}
.list-type::after {
  width: 100%;
  height: 0;
  margin: 0;
  display: inline-block;
  overflow: hidden;
  content: '';
}
.list-msg{
  margin-left: 52rpx;
  color: #1a2634;
  margin-bottom: 45rpx;
}
.dress-info{
  font-size: 24rpx;
  color: #bebebe;
}
  .order-ing{
    width: 193rpx;
    height: 81rpx;
    margin: 0 auto;
    background: url("~static/img/ordering.png") no-repeat center/cover;
  }
</style>
